<template>
  <div ref="vantaRef" style="width: 100%; height: 100vh;position:absolute;z-index:-2">
    <div class="dashboard-editor-container" style="position:relative;">
      <div class=" clearfix">
        <pan-thumb :image="avatar" style="float: left;position:relative;z-index:10">
          当前角色:
          <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
          <vab-upload ref="vabUpload" :limit="50" name="file" :size="2" url="/upload"></vab-upload>
          <el-button type="primary" @click="handleShow({ key: 'value' })" plain>更改头像</el-button>
        </pan-thumb>
        <!-- <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" /> -->
        <div class="info-container">
          <span class="display_name">{{ name }}</span>
          <span style="font-size:20px;padding-top:20px;display:inline-block;">个人主页</span>
        </div>
      </div>
      <div>
        <!-- <img :src="emptyGif" class="emptyGif"> -->
      </div>
    </div>
  </div>
</template>


<script src="three.r134.min.js"></script>
<script src="vanta.clouds.min.js"></script>

<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
//import GithubCorner from '@/components/GithubCorner'
import VabUpload from '@/components/VabUpload'
import CLOUDS from '../../../../vanta/src/vanta.clouds.js'
import * as THREE from 'three'



export default {
  name: 'DashboardEditor',
  components: { PanThumb, VabUpload,CLOUDS  },
  mounted() {
    this.vantaEffect = CLOUDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
    // 这里重新设置样式
    VANTA.CLOUDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      skyColor: 0xcbeefc,
      cloudColor: 0xe2e9f2,
      cloudShadowColor: 0x184c7c,
      sunColor: 0xf2b15f,
      sunGlareColor: 0xe0a591,
      sunlightColor: 0xfcc68f,
      speed: 0.80
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },

  data() {
    return {
      emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'

    }
  },
  methods: {
    handleShow(data) {
      this.$refs['vabUpload'].handleShow(data)
    },
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  }
}
</script>

<style lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  //background-color: #e3e3e3;
  min-height: 100vh;
  padding: 50px 60px 0px;

  .pan-info-roles {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20%;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
